import * as echarts from 'echarts'
import ecStat from 'echarts-stat'
import maxBy from 'lodash/maxBy'
// import isEqual from 'lodash/isEqual'
import findIndex from 'lodash/findIndex'
import flattenDeep from 'lodash/flattenDeep'
import { translateTitle } from '@/utils/i18n'
//饼图的示例集合
export const pieOption = {
  //基础饼图
  basePie: (datas) => {
    return {
      series: [
        {
          type: 'pie',
          typeName: 'basePie',
          data: datas,
          label: {
            show: true,
            fontSize: 15,
            formatter: '{b}: {c} ({d}%)',
          },
          radius: ['0', '50%'],
          center: ['50%', '55%'],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
  },
  conPie: (datas) => {
    let sum = 0
    for (var i of datas) {
      sum += i.value
    }
    const title = {
      name: '总数',
      value: sum,
    }
    const rich = {
      name: {
        color: '#DEDEDE',
        fontSize: 16,
        align: 'left',
        padding: [0, 10, 20, 0],
      },
      name1: {
        color: '#DEDEDE',
        fontSize: 16,
        align: 'left',
        padding: [0, 0, 0, 10],
      },
      value: {
        color: '#ccc',
        fontSize: 14,
        align: 'left',
      },
      title: {
        color: '#fff',
        fontSize: 17,
      },
      titleValue: {
        color: '#fff',
        fontSize: 40,
        fontWeight: 600,
        padding: [15, 5, 5, 5],
      },
    }
    return {
      legend: {
        orient: 'horizontal',
        icon: 'circle',
        x: 'center',
        y: '85%',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 20,
        align: 'left',
        textStyle: {
          color: '#D7E5FF',
          rich,
        },
        formatter: function (name) {
          let res = datas.filter((v) => v.name === name)
          let str = ''
          str = '{name1|' + res[0].name + '}{name1|' + res[0].value + '}'
          return str
        },
      },

      series: [
        {
          type: 'pie',
          center: ['50%', '40%'],
          radius: ['50%', '65%'],
          typeName: 'conPie',
          data: datas,
          startAngle: 180,
          label: {
            show: true,
            position: 'center',
            formatter: () => `{title|${title.name}}\n{titleValue|${title.value}}`,
            rich,
          },
        },
      ],
    }
  },
  sumBar: (datas) => {
    return {
      label: {
        color: '#fff',
        formatter: '{b}\n{c},{d}%',
      },
      legend: {
        x: '80%',
        y: 'center',
        orient: 'vertical',
        textStyle: {
          color: ['#FFF'],
        },
        icon: 'circle', // 图例的形状
        // 环图之间间隔，图例防抖动
        inactiveBorderWidth: 0,
        itemStyle: {
          borderWidth: 0,
        },
      },
      title: [
        {
          left: '39%',
          top: '40%',
          textAlign: 'center',
          text: datas.reduce((sum, current) => {
            return sum + current.value
          }, 0),
          textStyle: {
            fontSize: 14,
            color: '#FFF',
          },
          subtext: '总数',
          subtextStyle: {
            fontSize: 12,
            color: ['#fff'],
          },
        },
      ],
      series: [
        {
          type: 'pie',
          typeName: 'sumBar',
          radius: ['40%', '60%'],
          center: ['40%', '50%'],
          data: datas,
          // 环图之间间隔
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: 'rgba(0,0,0,0)',
            },
          },
        },
      ],
    }
  },
  //圆环饼图
  doughnutPie: (datas) => {
    return {
      series: [
        {
          typeName: 'doughnutPie',
          type: 'pie',
          radius: ['20%', '50%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold',
            },
          },
          data: datas,
          labelLine: {
            show: false,
          },
        },
      ],
    }
  },
  //南丁格尔玫瑰图
  nightingalePie: (datas) => {
    return {
      series: [
        {
          type: 'pie',
          typeName: 'nightingalePie',
          radius: ['10%', '60%'],
          center: ['50%', '50%'],
          roseType: 'area',
          data: datas,
          itemStyle: {
            borderRadius: 8,
          },
        },
      ],
    }
  },
  //阴影饼图
  shadowPie: (datas) => {
    return {
      series: [
        {
          typeName: 'shadowPie',
          type: 'pie',
          radius: ['55%', '80%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },

          data: datas,
        },
        {
          name: '',
          type: 'pie',
          radius: ['48%', '50%'],
          center: ['50%', '50%'],
          color: '#295da6',
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [1],
          silent: true,
        },
        {
          name: '',
          type: 'pie',
          radius: ['83%', '85%'],
          center: ['50%', '50%'],
          color: '#4072db',
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [1],
          silent: true,
          itemStyle: {
            shadowColor: 'rgba(255,255,255,0.7)',
            shadowBlur: 10,
          },
        },
        {
          name: '',
          type: 'pie',
          radius: ['89%', '90%'],
          center: ['50%', '50%'],
          color: '#142e59',
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [1],
          silent: true,
        },
      ],
    }
  },
  //带内容的南丁格尔玫瑰图
  conNightingalePie: (datas) => {
    return {
      title: {
        text: datas.reduce((sum, current) => {
          return sum + current.value
        }, 0),
        top: '45%',
        left: '40%',
        subtext: '总计',
        itemGap: 5,
        textStyle: {
          color: '#45a0e8',
          fontSize: 24,
        },
        subtextStyle: {
          color: '#61bbff',
          fontSize: 20,
        },
        textAlign: 'center',
      },
      series: [
        {
          type: 'pie',
          typeName: 'conNightingalePie',
          radius: ['30%', '70%'],
          center: ['41%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0,
          },
          data: datas,
          label: {
            formatter: function (params) {
              return `{normal|${params.name}：}\r\r\n{value|${params.data.value} (${params.percent}%)}`
            },
            rich: {
              normal: {
                color: '#fff',
                fontSize: 16,
                align: 'left',
              },
              value: {
                fontSize: 14,
                color: '#fff',
                fontWeight: 600,
                padding: [5, 0, 0, 0],
              },
            },
          },
        },
      ],
    }
  },
}
//折线图的示例集合
export const lineOption = {
  //基础折线图
  baseLine: (datas) => {
    return {
      xAxis: {
        type: 'category',
        data: datas?.map((item) => item.name) || [],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'line',
          typeName: 'baseLine',
          data: datas?.map((item) => item.value) || [],
        },
      ],
    }
  },
  //平滑折线图
  smoothLine: (datas) => {
    return {
      xAxis: {
        type: 'category',
        data: datas?.map((item) => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'line',
          smooth: true,
          typeName: 'smoothLine',
          data: datas?.map((item) => item.value),
        },
      ],
    }
  },
  //动态生成折线图
  dynamicLine: (datas) => {
    return {
      xAxis: {
        type: 'category',
        data: datas?.[0]?.['Data']?.map((item) => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: datas?.map((item) => {
        return {
          ...(item?.ChartName ? { name: item?.ChartName } : {}),
          type: 'line',
          data: item['Data']?.map((item) => item.value),
        }
      }),
    }
  },
  //基础面积图
  areaLine: (datas) => {
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: datas?.map((item) => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'line',
          typeName: 'areaLine',
          areaStyle: {},
          data: datas?.map((item) => item.value),
        },
      ],
    }
  },
  //有平均值的折线图
  avgLine: (datas) => {
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: datas?.map((item) => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'line',
          typeName: 'avgLine',
          data: datas?.map((item) => item.value),
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' },
            ],
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }],
          },
        },
      ],
    }
  },
  timeMarkLine: (datas) => {
    // 高峰点
    function maxPoint() {
      let arr = datas['timeMarkLine']
      let maxItem = maxBy(arr, (item) => item.value)
      if (maxItem.value == 0) {
        return false
      }
      let list = []
      arr.forEach((item, index) => {
        if (item.value == maxItem.value) {
          item.index = index
          list.push(item)
        }
      })
      console.warn('%c list', 'color: red;', list)
      let arr2 = []
      let result = []
      // 处理可能存在的连续高峰值
      for (let i = 0; i < list.length; i++) {
        const prev = i - 1 < 0 ? list[i] : list[i - 1]
        const cur = list[i]
        if (prev) {
          if (prev.index + 1 === cur.index) {
            arr2.push(prev)
            let flatResult = flattenDeep(result)
            if (findIndex(flatResult, (item) => item.name == cur.name) == -1) {
              arr2.push(cur)
            }
            if (i === list.length - 1) {
              result.push(arr2)
            }
          } else {
            if (arr2.length) {
              result.push(arr2)
              arr2 = []
            }
            let flatResult = flattenDeep(result)
            if (findIndex(flatResult, (item) => item.name == prev.name) == -1) {
              result.push(prev)
            }
            if (i === list.length - 1) {
              result.push(cur)
            }
          }
        }
      }
      console.warn('%c result', 'color: red;', result)
      return result
    }
    function getPieces() {
      let result = []
      let maxArea = maxPoint()
      maxArea = maxArea === 0 || maxArea ? maxArea : false
      if (!maxArea) return
      console.warn('%c maxArea', 'color: red;', maxArea)
      result.push({
        lte: maxArea[0].index - 1 < 0 ? 0 : maxArea[0].index - 1,
        color: 'green',
      })
      maxArea.forEach((item, index) => {
        // 高亮区域
        if (item instanceof Array) {
          result.push({
            lte: item[item.length - 1].index + 1,
            gt: item[0].index - 1 < 0 ? 0 : item[0].index - 1,
            color: 'red',
          })
        } else {
          result.push({
            lte: item.index + 1,
            gt: item.index - 1 < 0 ? 0 : item.index - 1,
            color: 'red',
          })
        }
        // 高亮区域后
        let hasIndex = index + 1 <= maxArea.length - 1
        // 判断是不是最后一段
        let params = item.index
        if (hasIndex) {
          let endParams = item.index
          if (maxArea[index + 1] instanceof Array) {
            params = maxArea[index + 1][0].index
          } else {
            params = maxArea[index + 1].index
          }
          if (maxArea[index] instanceof Array) {
            endParams = maxArea[index][maxArea[index].length - 1].index
          }
          result.push({
            lte: params - 1 < 0 ? 0 : params - 1,
            gt: endParams + 1,
            color: 'green',
          })
        } else {
          if (item instanceof Array) {
            params = item[item.length - 1].index
          }
          result.push({
            gt: params,
            color: 'green',
          })
        }
      })
      return result
    }
    function getMarkArea() {
      let maxArea = maxPoint()
      let result = []
      if (maxArea.length) {
        let params = datas['timeMarkLine']
        maxArea.forEach((item) => {
          if (item instanceof Array) {
            let firstIndex = item[0].index
            let lastIndex = item[item.length - 1].index
            result.push([
              {
                name: translateTitle('Ve.chart.高峰'),
                xAxis: params[firstIndex - 1 <= 0 ? 0 : firstIndex - 1].name,
              },
              {
                xAxis: params[lastIndex + 1 >= 23 ? 23 : lastIndex + 1].name,
              },
            ])
          } else {
            let index = item.index
            result.push([
              {
                name: translateTitle('Ve.chart.高峰'),
                xAxis: params[index - 1 <= 0 ? 0 : index - 1].name,
              },
              {
                xAxis: params[index + 1 >= 23 ? 23 : index + 1].name,
              },
            ])
          }
        })
      }
      return result
    }
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: datas['timeMarkLine']?.map((item) => item.name),
      },
      yAxis: {
        name: translateTitle('Ve.chart.任务数'),
        type: 'value',
        axisPointer: {
          snap: true,
        },
      },
      visualMap: {
        show: false,
        dimension: 0,
        pieces: getPieces(),
      },
      series: [
        {
          ...(datas['timeMarkLine'][0]?.chartName ? { name: datas['timeMarkLine'][0]?.chartName } : {}),
          type: 'line',
          smooth: true,
          typeName: 'timeMarkLine',
          data: datas['timeMarkLine']?.map((item) => item.value),
          markArea: {
            itemStyle: {
              color: 'rgba(255, 173, 177, 0.4)',
              borderColor: '#ff0000',
            },
            data: getMarkArea(),
          },
        },
      ],
    }
  },
}
//柱状图的示例集合
export const barOption = {
  //横向柱状图
  orgBar: (datas) => {
    return {
      grid: {
        left: '14%',
        right: '15%',
        bottom: '10%',
        top: '10%',
        containLabel: false,
      },
      xAxis: [
        {
          show: true,
        },
        {
          show: false,
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          show: true,
          data: datas.map((item) => item.name),
          position: 'left',
          axisLabel: {
            lineHeight: 0,
            verticalAlign: 'bottom',
            fontSize: 16,
            color: '#fff',
            formatter: '{value}',
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        {
          show: true,
          data: datas.map((item) => item.value),
          offset: 5,
          position: 'right',
          axisLabel: {
            lineHeight: 0,
            verticalAlign: 'bottom',
            fontSize: 16,
            color: '#19E5E6',
            formatter: '{value}',
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '',
          show: true,
          type: 'bar',
          barGap: '-100%',
          xAxisIndex: 1,
          barWidth: 15,
          itemStyle: {
            borderRadius: 10,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#0A7782', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#81EFF3', // 0% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          label: {
            show: false,
            position: 'insideRight',
            formatter: '{c}%',
            offset: [-10, 2],
            color: '#fff',
          },
          labelLine: {
            show: false,
          },
          z: 2,
          data: datas.map((item) => item.value),
          animationDelay: 1000,
          animationDuration: 1000,
        },
        // {
        //   name: '百分比',
        //   z: 1,
        //   show: true,
        //   type: 'bar',
        //   xAxisIndex: 1,
        //   barGap: '-100%',
        //   barWidth: 20,
        //   itemStyle: {
        //     borderRadius: 4,
        //     color: 'rgba(13, 55, 78, 1)',
        //   },
        //   label: {
        //     show: false,
        //   },
        //   data: new Array(datas.length).fill(100),
        // },
      ],
    }
  },
  //基础柱状图
  baseBar: (datas) => {
    return {
      xAxis: {
        type: 'category',
        axisLabel: {
          show: false,
          interval: 0,
          color: '#fff',
        },
        data: datas?.map((item) => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'bar',
          typeName: 'baseBar',
          label: {
            show: true,
            color: '#fff',
            position: 'inside',
            formatter: '{b}:{c}kg',
          },
          data: datas?.map((item) => item.value),
        },
      ],
    }
  },
  //横向堆叠bar
  stackBar: (datas) => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: datas['bar1']?.map((item) => item.name),
        interval: true,
      },
      dataZoom: [
        {
          id: 'dataZoomY',
          type: 'inside',
          yAxisIndex: [0],
          filterMode: 'empty',
        },
      ],
      series: [
        {
          ...(datas.bar1[0]?.chartName ? { name: datas.bar1[0]?.chartName } : {}),
          type: 'bar',
          stack: 'truck',
          barCategoryGap: '10%',
          itemStyle: {
            borderColor: 'transparent',
            borderWidth: 3,
          },
          data: datas.bar1,
        },
        {
          ...(datas.bar2[0]?.chartName ? { name: datas.bar2[0]?.chartName } : {}),
          type: 'bar',
          stack: 'truck',
          barCategoryGap: '10%',
          itemStyle: {
            borderColor: 'transparent',
            borderWidth: 3,
          },
          data: datas.bar2,
        },
        {
          ...(datas.bar3[0]?.chartName ? { name: datas.bar3[0]?.chartName } : {}),
          type: 'bar',
          stack: 'truck',
          barCategoryGap: '10%',
          itemStyle: {
            borderColor: 'transparent',
            borderWidth: 3,
          },
          data: datas.bar3,
        },
        {
          ...(datas.bar4[0]?.chartName ? { name: datas.bar4[0]?.chartName } : {}),
          type: 'bar',
          stack: 'truck',
          barCategoryGap: '10%',
          itemStyle: {
            borderColor: 'transparent',
            borderWidth: 3,
          },
          data: datas.bar4,
        },
      ],
    }
  },
  //柱状加折线图
  lineBar: (datas) => {
    return {
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: datas['bar1']?.map((item) => item.name),
      },
      yAxis: [
        {
          type: 'value',
          name: '%',
          min: 0,
          nameTextStyle: {
            color: '#ccc',
            padding: [0, 0, 10, -30],
          },
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              width: 1,
              // 使用深浅的间隔色
              color: ['#566471', '#566471'],
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 12,
            },
          },
        },
      ],
      dataZoom: [
        {
          id: 'dataZoomX',
          type: 'inside',
          xAxisIndex: [0],
          filterMode: 'empty',
        },
      ],
      series: [
        {
          ...(datas.bar2[0]?.chartName ? { name: datas.bar2[0]?.chartName } : {}),
          // name: translateTitle('Ve.chart.运行率'),
          data: datas.bar2,
          type: 'bar',
        },
        {
          ...(datas.bar1[0]?.chartName ? { name: datas.bar1[0]?.chartName } : {}),
          // name: translateTitle('Ve.chart.报警率'),
          data: datas.bar1,
          type: 'bar',
        },
        {
          ...(datas.line[0]?.chartName ? { name: datas.line[0]?.chartName } : {}),
          // name: translateTitle('Ve.chart.利用率'),
          data: datas.line,
          type: 'line',
          markLine: {
            symbol: 'none',
            itemStyle: {
              normal: {
                lineStyle: {
                  type: 'dotted',
                },
              },
            },
            data: [{ type: 'average', name: 'Avg' + '%' }],
          },
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
                type: 'solid',
              },
            },
          },
        },
      ],
    }
  },
  //带背景色的柱状图
  backgroundBar: (datas) => {
    return {
      xAxis: {
        type: 'category',
        data: datas?.map((item) => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'bar',
          typeName: 'backgroundBar',
          data: datas?.map((item) => item.value),
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
        },
      ],
    }
  },
  //坐标轴刻度与标签对齐
  alignTickBar: (datas) => {
    return {
      xAxis: [
        {
          type: 'category',
          data: datas?.map((item) => item.name),
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          data: datas?.map((item) => item.value),
          type: 'bar',
          typeName: 'alignTickBar',
          barWidth: '60%',
        },
      ],
    }
  },
  //圆角柱状图
  radiusBar: (datas) => {
    console.log(datas)
    return {
      legend: {},
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
          data: datas?.map((item) => item.name),
          axisLabel: {
            color: '#606266',
            interval: 0,
            margin: 10,
            align: 'center',
          },
        },
      ],
      yAxis: {
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#606266',
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      series: [
        // 梯田
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'bar',
          typeName: 'radiusBar',
          backgroundStyle: {
            color: 'rgba(216, 229, 247, 0.55)',
            borderRadius: [8, 8, 0, 0],
          },
          itemStyle: {
            normal: {
              borderRadius: [12, 12, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#74A3FF',
                  opacity: 0.85,
                },
                {
                  offset: 0,
                  color: '#ADDAFF',
                  opacity: 0.79,
                },
              ]),
              // barBorderRadius: 11,
            },
          },
          barWidth: '25',
          data: datas?.map((item) => item.value),
          label: {
            show: true,
            color: '#74A2FF',
            position: 'outside',
          },
        },
      ],
    }
  },
  //横向柱状图
  horBar: (datas) => {
    return {
      legend: {
        show: false,
      },
      xAxis: {
        show: false,
        type: 'value',
      },
      yAxis: [
        {
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            align: 'right',
            textStyle: {
              fontSize: 14,
              color: '#333',
              rich: {
                index: {
                  color: '#9d9d9d',
                  fontWeight: 'bold',
                  fontStyle: 'italic',
                },
                name: {
                  width: 7 * 14,
                  align: 'left',
                  textAlign: 'left',
                },
              },
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: datas?.map((item) => item.name),
        },
        {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#3196fa',
              fontSize: '12',
            },
            formatter: '{value}%',
          },
          data: datas?.map((item) => item.value),
        },
      ],
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'bar',
          typeName: 'horBar',
          showID: true,
          zlevel: 1,
          itemStyle: {
            normal: {
              // barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(24,144,255,0)',
                },
                {
                  offset: 1,
                  color: 'rgba(24,144,255,1)',
                },
              ]),
            },
          },
          barWidth: 20,
          data: datas,
        },
        {
          name: translateTitle('Ve.chart.背景'),
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          data: new Array(datas.length).fill(100),
          itemStyle: {
            normal: {
              color: '#ededed',
              // barBorderRadius: 30,
            },
          },
        },
      ],
    }
  },
  //分隔柱状图
  tickBar: (datas) => {
    return {
      dataZoom: [
        //滑动条
        {
          show: false, //是否显示滑动条
          type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          startValue: 0, // 从头开始。
          endValue: 8, // 一次性展示6个。
        },
      ],

      xAxis: {
        type: 'category',
        data: datas?.map((item) => item.name),
        axisLabel: {
          //X轴文字样式
          fontSize: 12,
          interval: 0,
          rotate: 90, //调整数值改变倾斜的幅度（范围-90到90）
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          //隐藏刻度
          show: false,
        },
        axisLine: {
          //y轴
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          //隐藏刻度
          show: false,
        },
        splitLine: {
          //隐藏刻度
          show: false,
        },
        axisLabel: {
          //Y轴文字
          fontSize: 12,
        },
        axisLine: {
          //y轴
          show: false,
        },
      },
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          data: datas?.map((item) => item.value),
          type: 'pictorialBar',
          typeName: 'tickBar',
          symbol:
            'path://M8.247197 8.247197m288.651889 0l1253.57392 0q288.651889 0 288.651889 288.651889l0 0q0 288.651889-288.651889 288.65189l-1253.57392 0q-288.651889 0-288.651889-288.65189l0 0q0-288.651889 288.651889-288.651889Z',
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  fontSize: 10,
                },
              },
            },
          },
          animationEasing: 'elasticOut',
          symbolSize: ['40%', '13%'],
          symbolMargin: '4', //图形垂直间隔
          symbolRepeat: 'fixed',
          symbolClip: true,
        },
      ],
    }
  },
  //进度条
  progressBar: (datas) => {
    return {
      title: [
        {
          text: datas[0].value > 100 ? 100 : datas[0].value + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: '12',
            color: '#FFFFFF',
            fontFamily: 'DINAlternate-Bold, DINAlternate',
            foontWeight: '600',
          },
        },
      ],
      polar: {
        radius: ['80%', '100%'],
        center: ['50%', '50%'],
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        show: false,
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: 'category',
        show: false,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          type: 'bar',
          roundCap: true,
          typeName: 'progressBar',
          barWidth: 60,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(66, 66, 66, .3)',
          },
          data: [datas[0].value > 100 ? 100 : datas[0].value],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#16CEB9',
                },
                {
                  offset: 1,
                  color: '#6648FF',
                },
              ]),
            },
          },
        },
      ],
    }
  },
  //单行堆叠图
  rowStackBar: (legendData, colorList) => {
    colorList = colorList || ['#226E9C', '#3C93C2', '#6CB0D6', '#9EC9E2', '#C5E1EF']
    var seriesList = []
    for (var i = 0; i < legendData.length; i++) {
      seriesList.push({
        ...(legendData[i]?.chartName ? { name: legendData[i]?.chartName } : {}),
        type: 'bar',
        typeName: 'rowStackBar',
        stack: '2',
        legendHoverLink: false,
        barWidth: 30,
        label: {
          show: true,
          position: 'inside',
          color: '#fff',
          formatter: legendData[i].name,
        },
        data: [
          {
            value: legendData[i].value,
            itemStyle: {
              color: colorList[i],
            },
          },
        ],
      })
    }
    return {
      backgroundColor: '#fff',
      xAxis: {
        show: false,
      },
      yAxis: [
        {
          inverse: true,
          data: [''],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: seriesList,
    }
  },
}
//仪表盘的示例集合
export const gaugeOption = {
  //基础仪表盘
  baseGauge: (datas) => {
    return {
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'gauge',
          typeName: 'baseGauge',
          detail: {
            formatter: '{value}',
          },
          data: datas,
        },
      ],
    }
  },
  //带标签数字动画的仪表盘
  animateGauge: (datas) => {
    return {
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'gauge',
          typeName: 'animateGauge',
          progress: {
            show: true,
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}',
          },
          data: datas,
        },
      ],
    }
  },
  //速度仪表盘
  speedGauge: (datas) => {
    return {
      series: [
        {
          ...(datas[0]?.chartName ? { name: datas[0]?.chartName } : {}),
          type: 'gauge',
          typeName: 'speedGauge',
          progress: {
            show: true,
            width: 18,
          },
          axisLine: {
            lineStyle: {
              width: 18,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 2,
              color: '#999',
            },
          },
          axisLabel: {
            distance: 25,
            color: '#999',
            fontSize: 12,
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
              borderWidth: 10,
            },
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 35,
            offsetCenter: [0, '70%'],
          },
          data: datas,
        },
      ],
    }
  },
}
//散点图的示例集合
export const scatterOption = {
  //风险图
  riskScatter: (idata) => {
    for (let p of idata) {
      p[2] = 17938
      p[3] = ''
    }
    return {
      xAxis: {
        name: translateTitle('Ve.chart.风险发生可能性'),
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      yAxis: {
        name: translateTitle('Ve.chart.风险影响度'),
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
        scale: true,
      },
      series: [
        {
          ...(idata[0]?.chartName ? { name: idata[0]?.chartName } : {}),
          data: idata,
          type: 'scatter',
          symbolSize(data1) {
            return data1[2] / 5e2
          },
          emphasis: {
            focus: 'series',
            label: {
              show: true,
              formatter(param) {
                return param.data[3]
              },
              position: 'top',
            },
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: 'rgb(251, 118, 123)',
              },
              {
                offset: 1,
                color: 'rgb(204, 46, 72)',
              },
            ]),
          },
        },
      ],
    }
  },
  //基础散点图
  baseScatter: (datas) => {
    return {
      xAxis: {},
      yAxis: {},
      series: [
        {
          symbolSize: 20,
          data: [datas],
          type: 'scatter',
        },
      ],
    }
  },
  //指数散点图
  indexScatter: (datas) => {
    echarts.registerTransform(ecStat.transform.regression)
    return {
      dataset: [
        {
          source: datas,
        },
        {
          transform: {
            type: 'ecStat:regression',
            config: {
              method: 'exponential',
              // 'end' by default
              // formulaOn: 'start'
            },
          },
        },
      ],
      xAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      yAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      series: [
        {
          name: 'scatter',
          type: 'scatter',
          datasetIndex: 0,
        },
        {
          name: 'line',
          type: 'line',
          smooth: true,
          datasetIndex: 1,
          symbolSize: 0.1,
          symbol: 'circle',
          label: { show: true, fontSize: 16 },
          labelLayout: { dx: -20 },
          encode: { label: 2, tooltip: 1 },
        },
      ],
    }
  },
}

//多种图例一起的示例集合
export const moreTypeOptions = {
  //炫酷柱图加折线图组合
  lineAndBar: (datas) => {
    console.log(datas.bar?.map((item) => item.name))
    return {
      tooltip: {
        show: true,
        trigger: 'axis',
        backgroundColor: 'rgba(0,0,0,0.6)',
        borderColor: 'rgba(0,0,0,0)',
        textStyle: {
          color: '#fff',
        },
        formatter: function (params) {
          return (
            params[0].name +
            '<br/>' +
            params[0].marker +
            params[0].seriesName +
            ' : ' +
            params[0].value +
            '<br/>' +
            params[1].marker +
            params[1].seriesName +
            ' : ' +
            params[1].value +
            '%' +
            '<br/>' +
            params[2].marker +
            params[2].seriesName +
            ' : ' +
            params[2].value +
            '%'
          )
        },
        axisPointer: {
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(255, 255, 255,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(0, 255, 233,0)',
                },
              ],
              global: false,
            },
          },
        },
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            show: false,
            color: '#aaa',
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#aaa',
            width: 100,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false,
          data: datas.bar?.map((item) => item.name),
        },
      ],

      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', //虚线
              color: '#00BFF3',
              opacity: 0.23,
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#aaa',
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: 'value',
          position: 'right',
          axisLabel: {
            formatter: '{value}%', //使图变成百分比形式
          },
          splitLine: {
            //网格线显不显示
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: translateTitle('Ve.chart.违章次数'),
          type: 'bar',
          typeName: 'bar',
          stack: translateTitle('Ve.chart.总量'),
          barMaxWidth: 15,
          // barGap: "10%",
          data: datas.bar?.map((item) => {
            return {
              value: item,
              itemStyle: {
                normal: {
                  barBorderRadius: item > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], //左上角参数1, 右上角参数2, 右下角参数3, 左下角参数4
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: item > 0 ? '#956FD4' : '#64ccff',
                    },
                    {
                      offset: 1,
                      color: item > 0 ? '#64ccff' : '#956FD4',
                    },
                  ]),
                },
              },
            }
          }),
        },
        {
          name: translateTitle('Ve.chart.环比上月'),
          type: 'line',
          typeName: 'line',
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: '#A582EA',
            },
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: '#A582EA',
            },
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#A582EA',
            borderWidth: 2,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(145, 118, 215,0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(145, 118, 215,0)',
                  },
                ],
                false
              ),
            },
          },
          data: datas['line']?.map((item) => item.value), //data.values
        },
        {
          name: translateTitle('Ve.chart.同比上月'),
          type: 'line',
          typeName: 'line1',
          yAxisIndex: 1,
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: '#64ccff',
            },
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: '#64ccff',
            },
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#64ccff',
            borderWidth: 2,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(102, 200, 253,0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(81,150,164,0)',
                  },
                ],
                false
              ),
            },
          },
          data: datas['line1']?.map((item) => item.value), //data.values
        },
      ],
    }
  },
}
export const radarOptions = {
  baseRadar: (datas) => {
    return {
      tooltip: {
        formatter(params) {
          var relVal = ''
          if (params.name == '全选') {
            relVal = ''
          } else {
            var ObjNames = {
              nameer: [], //存键值名
              labelValue: [], //存值
            }
            for (let i = 0; i < datas.indicator.length; i++) {
              ObjNames.nameer.push(datas.indicator[i].name) //赋值
            }
            ObjNames.labelValue = params.value //赋值
            relVal = params.marker + params.name
            for (let i = 0; i < ObjNames.nameer.length; i++) {
              relVal += '<br/>' + ObjNames.nameer[i]
              relVal += ':' + ObjNames.labelValue[i].toFixed(2) + '%' //后端返回的是小数，此处做数据处理
            }
          }
          return relVal //最后将处理好的值return
        },
      },
      radar: {
        name: {
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        },
        nameGap: 5,
        radius: '75%',
        indicator: datas.indicator,
        splitArea: {
          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: {
            // 分隔区域的样式设置。
            color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          },
        },
        axisLine: {
          //指向外圈文本的分隔线样式
          lineStyle: {
            color: '#153269',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#113865', // 分隔线颜色
            width: 1, // 分隔线线宽
          },
        },
      },
      series: [
        {
          type: 'radar',
          symbolSize: 8,
          // symbol: 'angle',
          data: [
            {
              ...(datas.radar1[0]?.chartName ? { name: datas.radar1[0]?.chartName } : {}),
              value: datas.radar1?.map((v) => v.value),
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#4A99FF',
                    // shadowColor: '#4A99FF',
                    // shadowBlur: 10,
                  },
                  shadowColor: '#4A99FF',
                  shadowBlur: 10,
                },
              },
              label: {
                show: true,
                formatter: function (params) {
                  return params.value + '%'
                },
                color: '#ffffff',
                fontSize: 12,
              },
              areaStyle: {
                normal: {
                  // 单项区域填充样式
                  color: {
                    type: 'linear',
                    x: 0, //右
                    y: 0, //下
                    x2: 1, //左
                    y2: 1, //上
                    colorStops: [
                      {
                        offset: 0,
                        color: '#4A99FF',
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(0,0,0,0)',
                      },
                      {
                        offset: 1,
                        color: '#4A99FF',
                      },
                    ],
                    globalCoord: false,
                  },
                  opacity: 1, // 区域透明度
                },
              },
            },
            {
              value: datas.radar2?.map((v) => v.value),
              ...(datas.radar2[0]?.chartName ? { name: datas.radar2[0]?.chartName } : {}),
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#4BFFFC',
                    // shadowColor: '#4BFFFC',
                    // shadowBlur: 10,
                  },
                  shadowColor: '#4BFFFC',
                  shadowBlur: 10,
                },
              },
              label: {
                show: true,
                formatter: function (params) {
                  return params.value + '%'
                },
                color: '#ffffff',
                fontSize: 12,
              },
              areaStyle: {
                normal: {
                  // 单项区域填充样式
                  color: {
                    type: 'linear',
                    x: 0, //右
                    y: 0, //下
                    x2: 1, //左
                    y2: 1, //上
                    colorStops: [
                      {
                        offset: 0,
                        color: '#4BFFFC',
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(0,0,0,0)',
                      },
                      {
                        offset: 1,
                        color: '#4BFFFC',
                      },
                    ],
                    globalCoord: false,
                  },
                  opacity: 1, // 区域透明度
                },
              },
            },
          ],
        },
      ],
    }
  },
}
